<template>
  <div class="navbar_main">
    <!-- 导航栏左边部分 -->
    <div class="nav_left">
      <ul>
        <li class="nav_left_item" @click="returnHome">
          <a href="#/home">
            <i class="iconfont icon-bilibili home_logo"></i>
          </a>
        </li>
        <li class="nav_left_item">番剧</li>
        <li class="nav_left_item">
          <el-popover placement="bottom-start" trigger="hover">
            <div class="nav-game">
              <div class="n-g-left">
                <div class="n-g-img">
                  <img src="../../assets/img/game1.png" alt=""/>
                </div>
                <div class="n-g-recommend">
                  <span class="recommend-item">
                    <img src="../../assets/img/game2.png" alt=""/>
                  </span>
                  <span class="recommend-item">
                    <img src="../../assets/img/game3.png" alt=""/>
                  </span>
                  <span class="recommend-item">
                    <img src="../../assets/img/game4.png" alt=""/>
                  </span>
                </div>
              </div>
              <el-divider direction="vertical"></el-divider>
              <div class="n-g-right">
                <ul>
                  <li class="n-g-title">漫威超级战争</li>
                  <li class="n-g-title">代号：弥弥尔</li>
                  <li class="n-g-title">LOL全球总决赛</li>
                  <li class="n-g-title">NBA决赛让3追4</li>
                  <li class="n-g-title">数码宝贝：新纪元</li>
                  <li class="n-g-title">我的世界66</li>
                </ul>
              </div>
            </div>
            <a slot="reference">游戏中心</a>
          </el-popover>
        </li>
        <li class="nav_left_item">
          <el-popover placement="bottom-start" trigger="hover">
            <div class="nav-zhibo">
              <div class="n-z-left">
                <div class="n-z-l-title">热门直播：</div>
                <div class="n-z-l-main">
                  <span class="n-z-l-item">
                    <img src="../../assets/img/zhubo1.png"/>
                    <p>坏学姐</p>
                  </span>
                  <span class="n-z-l-item">
                    <img src="../../assets/img/zhubo2.png"/>
                    <p>喵喵喵</p>
                  </span>
                  <span class="n-z-l-item">
                    <img src="../../assets/img/zhubo3.png"/>
                    <p>甜幼学妹</p>
                  </span>
                  <span class="n-z-l-item">
                    <img src="../../assets/img/zhubo4.png"/>
                    <p>要柔柔</p>
                  </span>
                  <span class="n-z-l-item">
                    <img src="../../assets/img/zhubo5.png"/>
                    <p>琉璃不琉璃</p>
                  </span>
                  <span class="n-z-l-item">
                    <img src="../../assets/img/zhubo6.png"/>
                    <p>梦里有我</p>
                  </span>
                </div>
              </div>
              <el-divider class="hot-divider" direction="vertical"></el-divider>
              <div class="n-z-right">
                <div class="n-z-l-title">热门活动：</div>
                <img src="../../assets/img/hot.png" alt=""/>
                <img src="../../assets/img/hot2.png" alt=""/>
              </div>
            </div>
            <a slot="reference">直播</a>
          </el-popover>
        </li>
        <li class="nav_left_item">会员购</li>
        <li class="nav_left_item">
          <el-popover
              placement="bottom-start"
              title="标题"
              width="200"
              trigger="hover"
              content="漫画漫画漫画漫画"
          >
            <a slot="reference">漫画</a>
          </el-popover>
        </li>
        <li class="nav_left_item">赛事</li>
        <li class="nav_left_item">
          <el-popover placement="bottom-start" trigger="hover">
            <div class="nav-app">
              <img src="../../assets/img/saoma.png" alt=""/>
            </div>
            <a slot="reference">
              <i class="iconfont icon-shouji app_logo"></i>
              下载App
            </a>
          </el-popover>
        </li>
      </ul>
    </div>

    <!-- 导航栏中间区域 -->
    <div class="nav_center">

      <div
          class="nav_center_search"
          v-if="searchExist"
          v-show="searchVisible"
          ref="NavSearch"
      >
        <!-- 输入框 -->
        <el-autocomplete
            class="search_inp"
            popper-class="my-autocomplete"
            v-model="searchData"
            :placeholder="searchDefaults"
            :fetch-suggestions="querySearch"
            @select="handleSelect"
            @keyup.enter.native="searchConfirm"
            clearable
        >
          <template slot-scope="{ item }">
            <div class="hot_search">
              <span class="hot_pos">{{ item.pos }}</span>
              <span class="hot_keyword">{{ item.keyword }}</span>
              <span class="hot_icon">
                <!-- :src="item.icon ? item.icon : '../../assets/img/jian.png'" -->
                <img :src="hotIconImg(item)" v-if="hotIconImg(item)"/>
              </span>
            </div>
          </template>
        </el-autocomplete>

        <el-button class="search_btn" type="info" plain @click="searchConfirm">
          <i class="iconfont icon-sousuo search_logo"></i>
        </el-button>
      </div>

    </div>

    <!--    登录页面-->
    <el-dialog :visible.sync="dialogVisible" style="text-align: center; ">
      <div style="height: 500px;" class="f1">
        <div style="margin-bottom: 20px">
          <div id="login">
            <a href="#" id="pswd" style="color: deepskyblue" @click="pswd()">密码登录</a><span
              style="margin: 0px 10px">|</span><a href="#" id="note" @click="note()" style="color: black">短信登陆</a>
          </div>
          <div id="forget" hidden="hidden">
            <a href="#" style="font-size: 20px;text-decoration: none;color: deepskyblue" @click="pswd()">返回登陆</a>
          </div>
          <div id="register" hidden="hidden">
            <a href="#" style="font-size: 20px;text-decoration: none;color: deepskyblue" @click="pswd()">返回登陆</a>
          </div>

        </div>
        <!--  密码登录-->
        <div id="pswdLogin">
          <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                   class="demo-ruleForm">
            <el-form-item prop="username" style="width: 40%;margin-left: 5%">
              <el-input prefix-icon="el-icon-phone" v-model="ruleForm.username" name="username" placeholder="请输入手机号"
                        style="width: 400px;  "></el-input>
            </el-form-item>
            <!--<br>-->
            <el-form-item prop="password" style="width: 40%;margin-left: 5%">
              <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" v-model="ruleForm.password" name="password"
                        show-password
                        style="width: 400px;"></el-input>
            </el-form-item>
            <a href="#" @click="forget()"
               style="color: deepskyblue;text-decoration: none;position: absolute;margin-top: 10px;margin-left: -5%">忘记密码？</a>
            <br>
            <br>
            <el-button round type="primary" @click="submitForm('ruleForm')" style="width: 200px;">登录</el-button>
            <el-button round @click="register()" style="width: 200px;margin-bottom: 50px;color: black">注册</el-button>
          </el-form>
        </div>
        <!--注册页面-->
        <div id="register1" hidden="hidden">
          <el-form :model="registerForm" status-icon :rules="registerrules" ref="registerForm" label-width="100px">
            <el-form-item prop="phone" style="margin-right: 24%">
              <el-input prefix-icon="el-icon-phone" v-model="registerForm.phone" name="phone" placeholder="请输入手机号"
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="password" style="width: 60%;">
              <el-input prefix-icon="el-icon-lock" show-password type="password" v-model="registerForm.password"
                        name="password"
                        placeholder="密码应该由英文大小写、数字、符号组成，不少于8位"
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="password2" style="width: 40%;">
              <el-input type="password" prefix-icon="el-icon-lock" placeholder="请输入确认密码"
                        v-model="registerForm.password2" name="password2"
                        show-password
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="code" style="width: 40%;">
              <el-input prefix-icon="el-icon-loading" name="code" placeholder="请输入验证码" id="code" style="width: 400px;"
                        v-model="registerForm.code"></el-input>
            </el-form-item>
            <br>
            <br>
            <el-button type="primary" round @click="submitForm3('registerForm')" style="width: 200px;">立即注册</el-button>

            <el-button type="primary" :disabled="disable2" style=" position: absolute;right: 8%; top: 18%;"
                       :class="{ codeGeting:isGeting2 }"
                       @click="getVerifyCode2()">
              {{ getCode2 }}
            </el-button>
          </el-form>
        </div>
        <!--  短信登录-->
        <div id="nodeLogin" hidden="hidden">
          <el-form :model="loginForm" status-icon :rules="loginrules" ref="loginForm" label-width="100px">
            <el-form-item prop="phone" style="margin-right: 24%">
              <el-input prefix-icon="el-icon-phone" v-model="loginForm.phone" name="phone" placeholder="请输入手机号"
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="code" style="width: 30%;">
              <el-input prefix-icon="el-icon-loading" name="code" placeholder="请输入验证码" id="code" style="width: 400px;"
                        v-model="loginForm.code"></el-input>
            </el-form-item>
            <br>
            <br>
            <el-button type="primary" round @click="submitForm1('loginForm')" style="width: 200px;">登录</el-button>
            >
            <el-button type="primary" :disabled="disable" style=" position: absolute;right: 8%; top: 18%;"
                       :class="{ codeGeting:isGeting }"
                       @click="getVerifyCode">
              {{ getCode }}
            </el-button>
          </el-form>

        </div>
        <!--  忘记密码-->
        <div id="forgetLogin" hidden="hidden">
          <el-form :model="editfrom" status-icon :rules="editrules" ref="editfrom" label-width="100px">
            <el-form-item prop="password" style="width: 60%;">
              <el-input prefix-icon="el-icon-lock" show-password type="password" v-model="editfrom.password"
                        name="password"
                        placeholder="密码应该由英文大小写、数字、符号组成，不少于8位"
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="password2" style="width: 40%;">
              <el-input prefix-icon="el-icon-lock" type="password" placeholder="请输入确认密码" v-model="editfrom.password2"
                        name="password2"
                        show-password
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="phone" style="width: 40%;">
              <el-input prefix-icon="el-icon-phone" v-model="editfrom.phone" name="phone" placeholder="请输入手机号"
                        style="width: 400px;"></el-input>
            </el-form-item>
            <el-form-item prop="code" style="width: 40%;">
              <el-input prefix-icon="el-icon-loading" name="code" placeholder="请输入验证码" id="code" style="width: 400px;"
                        v-model="editfrom.code"></el-input>
            </el-form-item>
            <el-button type="primary" round @click="submitForm2('editfrom')" style="width: 200px;">确认修改</el-button>
            <el-button type="primary" :disabled="disable1" style="position: absolute;right: 8%; top: 39.5%;"
                       :class="{ codeGeting:isGeting1 }"
                       @click="getVerifyCode1()">
              {{ getCode1 }}
            </el-button>
          </el-form>
        </div>
        <img style="vertical-align: bottom"
             src="https://s1.hdslb.com/bfs/static/passport/static/img/2233login.af9c53d.png">
      </div>

    </el-dialog>
    <!-- 导航栏右边区域 -->
    <div class="nav_right">

      <ul>
        <!-- 头像 "-->
        <li class="nav_right_item" @click="ap1()">
          <!--          <el-avatar size="medium">-->
          <!--            <img id="a" :src="userimg" v-if="this.img==true">-->
          <!--            <span v-else-if="this.img==false">登录</span>-->
          <!--          </el-avatar>-->
          <el-popover placement="bottom-start" trigger="hover">
            <div class="bigmember" style="text-align: center;">
              <!--未登录状态显示框-->
              <div class="bigmember-btn" v-if="this.img==false">
                <el-button type="primary" size="small" @click="dialogVisible=true">登录</el-button>
              </div>
              <!--登陆状态显示框-->
              <div v-if="this.img==true">
                <router-link style="color: #2c3e50;" to="/fansAttention">关注{{ attention }}</router-link>
                <router-link style="color: #2c3e50;" to="/fansBean">粉丝{{ fans }}</router-link>
                <br>
                <el-button type="primary" size="small" @click="rou();">个人中心</el-button>
                <el-button type="primary" size="small" @click="clear();">注销</el-button>

                <!--                <el-menu-item index="1">处理中心</el-menu-item>-->
              </div>
            </div>
            <el-avatar id="lo" slot="reference" size="medium">
              <img id="a" :src="userimg" v-if="this.img==true">
              <span v-else-if="this.img==false">登录</span>
            </el-avatar>
          </el-popover>

        </li>
        <li class="nav_right_item">
          <el-popover placement="bottom-start" v-if="this.img==false" trigger="hover">
            <div class="bigmember">
              <div class="bigmember-title">精彩推荐</div>
              <div class="bigmember-img">
                <img src="../../assets/img/bighuiyuan.png" alt=""/>
              </div>
              <p>0.6元/天开超Q双会员领限量装扮</p>
              <div class="bigmember-btn">
                <el-button type="primary" size="small">开通大会员</el-button>
              </div>
            </div>
            <a slot="reference">大会员</a>
          </el-popover>
        </li>
        <li class="nav_right_item">
          <el-badge :value="8" class="item">
            <el-popover placement="bottom-start" trigger="hover">
              <div class="message">
                <ul>
                  <li class="message-item">
                    <span>回复我的</span>
                    <el-badge :value="3" class="item message-item-spot">
                      <span>&nbsp;</span>
                    </el-badge>
                  </li>
                  <li class="message-item">
                    <span>@我的</span>
                  </li>
                  <li class="message-item">
                    <span>收到的赞</span>
                    <el-badge :value="5" class="item message-item-spot">
                      <span>&nbsp;</span>
                    </el-badge>
                  </li>
                  <li class="message-item">
                    <span>系统通知</span>
                  </li>
                  <li class="message-item">
                    <span>我的消息</span>
                  </li>
                </ul>
              </div>
              <a slot="reference">消息</a>
            </el-popover>
          </el-badge>
        </li>
        <li class="nav_right_item">
          <el-badge :value="12" class="item">
            <el-popover
                placement="bottom-start"
                title="标题"
                width="200"
                trigger="hover"
                content="RNG VS FPX"
            >
              <a slot="reference">动态</a>
            </el-popover>
          </el-badge>
        </li>
        <li class="nav_right_item">
          <el-popover
              placement="bottom-start"
              title="标题"
              width="200"
              trigger="hover"
              content="RNG VS FPX"
          >
            <a slot="reference">收藏</a>
          </el-popover>
        </li>
        <li class="nav_right_item">
          <el-popover
              placement="bottom-start"
              width="200px"
              trigger="hover"
          >
            <!--            历史观看记录-->
            <!--未登录状态显示框-->
            <div style="max-height:500px;overflow-y: scroll;">
              <div class="bigmember-btn" v-if="this.img==false">
                <el-row style="color:#2c3e50">登陆即可查看历史纪录</el-row>
                <el-button type="primary" size="small" @click="dialogVisible=true">登录</el-button>
              </div>
              <!--登陆状态显示框-->
              <div v-if="this.img==true">
                <el-button type="primary" style="margin-bottom: 10px" @click="morehistory()">更多历史</el-button>
                <el-row v-for="his in historyList" class="history" @click="jumpPath(his.history_videoid)"
                        style="height: 110px;width: 300px;vertical-align: middle">
                  <div @click="jumpPath(his.history_videoid)">
                    <img style="width: 150px;height: 90px;float: left;margin-right: 10px" :src="his.video_cover">
                    <!--                    <img style="width: 150px;height: 90px;float: left;margin-right: 10px" src="https://jiangaibo.oss-cn-beijing.aliyuncs.com\bbb\425182036\cover.jpg" ></img>-->
                    <span>
                      <div
                          style="font-size: 15px;color: #333333;font-weight: bold;height: 45px;overflow: hidden">{{
                          his.video_title
                        }}
                      </div>
                    <span style="font-size: 10px;color: #333333" value-format="yyyy-MM-dd">
                      {{ his.history_createtime|formatDate }}
                    </span><br>
                    <span style="font-size: 10px;color: #333333">
                      {{ his.user_nickname }}
                    </span>
                  </span>
                  </div>

                </el-row>
              </div>
            </div>
            <a slot="reference">历史</a>
          </el-popover>
        </li>
        <li class="nav_right_item">创作中心</li>
        <li class="nav_right_item">
          <el-button type="danger" @click="contribute">投稿</el-button>
        </li>
      </ul>
    </div>

  </div>

</template>

<script>
export default {
  name: "NavBar",
  props: {
    // 热搜数据
    hotsearch: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    //验证手机号
    var usernameClikc = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空！！'));
      }
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        return callback(new Error('手机号格式不正确！'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    //验证验证码
    var checkCode = (rule, value, callback) => {
      var date = new Date();
      if (this.loginForm.code != this.param) {
        return callback(new Error('验证码不正确'));
      } else {
        callback()
      }
    };
    //验证手机号
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        this.disable = true;
        return callback(new Error('手机号不能为空！！'));
      }
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        this.disable = true
        return callback(new Error('手机号格式不正确！'));
      } else {
        this.disable = false
      }
      this.$http.post('/user/user/query', {userTel: this.loginForm.phone}).then(result => {
        if (!result.data.toString()) {
          this.disable = true;
          return callback(new Error('该手机号不存在！请先去注册'))
        } else {
          callback()
        }
      })
    };
    //输入密码
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$])(.{8,20})$/.test(value)) {
        callback(new Error('密码应该由英文大小写、数字、符号组成，不少于8位'));
      } else {
        if (this.editfrom.password !== '') {
          this.$refs.editfrom.validateField('password2');
        }
        callback();
      }
    };
    //确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.editfrom.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    //验证手机号
    var checkPhone1 = (rule, value, callback) => {
      var vm = this;
      if (!value) {
        vm.disable1 = true;
        return callback(new Error('手机号不能为空！！'));
      }
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        vm.disable1 = true
        return callback(new Error('手机号格式不正确！'));
      } else {
        vm.disable1 = false
      }
      this.$http.post('/user/user/query', {userTel: this.editfrom.phone}).then(result => {
        if (!result.data.toString()) {
          this.disable1 = true;
          return callback(new Error('该手机号不存在！请先去注册'))
        } else {
          callback()
        }
      })
    };
    //忘记密码验证验证码
    var checkCode1 = (rule, value, callback) => {
      if (this.editfrom.code != this.param1) {
        return callback(new Error('验证码不正确'));
      } else {
        callback()
      }
    };
    /**
     * 注册验证
     */
        //短信验证码
    var checkCode2 = (rule, value, callback) => {
          if (this.registerForm.code != this.param2) {
            return callback(new Error('验证码不正确'));
          } else {
            callback()
          }
        };
    //输入密码
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$])(.{8,20})$/.test(value)) {
        callback(new Error('密码应该由英文大小写、数字、符号组成，不少于8位'));
      } else {
        if (this.registerForm.password !== '') {
          this.$refs.registerForm.validateField('password2');
        }
        callback();
      }
    };
    //确认密码
    var validatePass4 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    //验证手机号
    var checkPhone2 = (rule, value, callback) => {
      if (!value) {
        this.disable2 = true;
        return callback(new Error('手机号不能为空！！'));
      }
      if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(value)) {
        this.disable2 = true
        return callback(new Error('手机号格式不正确！'));
      } else {
        this.disable2 = false
      }
      this.$http.post('/user/user/query', {userTel: this.registerForm.phone}).then(result => {
        if (!result.data.toString()) {
          callback()
        } else {
          this.disable2 = true;
          return callback(new Error('该手机号已注册！请换个号码'))
        }
      })
    };
    return {
      //历史记录信息
      historyList: [],
      //判断悬浮用户信息
      divsuspension: false,
      //判断图片展示隐藏
      img: false,
      // 用于判断搜索框是否存在
      searchExist: true,
      // 搜索区域的显示与隐藏
      searchVisible: true,
      searchInput: "",
      //用户头像
      userimg: '',
      //账号密码登录方式
      ruleForm: {
        username: '13937321951',
        password: 'jiangaibo..',
        //grant_type: "password"
      },
      //校验格式
      rules: {
        username: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {validator: usernameClikc, trigger: "blur"},
        ],
        password: [
          {validator: validatePass, trigger: 'blur'},
          {min: 5, max: 13, message: '长度在 6 到 13 个字符', trigger: 'blur'}
        ],
      },
      //获取验证码
      getCode: '获取验证码',
      getCode1: '获取验证码',
      getCode2: '获取验证码',
      isGeting: false,
      isGeting1: false,
      isGeting2: false,
      count: 60,
      count1: 60,
      count2: 60,
      disable: true,
      disable1: true,
      disable2: true,
      param: '',
      param1: '',
      param2: '',
      //用户注册绑定值
      registerForm: {
        password: '',
        password2: '',
        phone: '',
        code: '',
      },
      registerrules: {
        password: [
          {validator: validatePass3, trigger: 'blur'}
        ],
        password2: [
          {validator: validatePass4, trigger: 'blur'}
        ],
        phone: [
          {request: true, validator: checkPhone2, trigger: 'blur'}
        ],
        code: [
          {required: true, message: '验证码不能为空', trigger: 'blur'},
          {request: true, validator: checkCode2, trigger: 'blur'},
          {min: 5, max: 7, message: "长度在 6 个字符", trigger: 'blur'}
        ]
      },
      //验证码模式登录
      loginForm: {
        phone: '',
        code: '',
      },
      loginrules: {
        phone: [
          {request: true, validator: checkPhone, trigger: 'blur'}
        ],
        code: [
          {required: true, message: '验证码不能为空', trigger: 'blur'},
          {request: true, validator: checkCode, trigger: 'blur'},
          {min: 5, max: 7, message: "长度在 6 个字符", trigger: 'blur'}
        ]
      },
      //忘记密码修改
      editfrom: {
        password: '',
        password2: '',
        phone: '',
        code: ''
      },
      editrules: {
        phone: [
          {request: true, validator: checkPhone1, trigger: 'blur'}
        ],
        password: [
          {validator: validatePass1, trigger: 'blur'}
        ],
        password2: [
          {validator: validatePass2, trigger: 'blur'}
        ],
        code: [
          {required: true, message: '验证码不能为空', trigger: 'blur'},
          {request: true, validator: checkCode1, trigger: 'blur'},
          {min: 5, max: 7, message: "长度在 6 个字符", trigger: 'blur'}
        ]
      },

      // 屏幕的宽度
      screenWidth: document.body.clientWidth,
      // 热搜数据
      hotData: this.hotsearch,
      // 输入框的数据
      searchData: "",
      // 默认搜索词
      searchDefaults: "请输入内容",
      dialogVisible: false,
      //用户id
      userid: '',
      //用户关注的人数
      attention: '',
      //用户的粉丝数量
      fans: '',
    };
  },
  created() {
    // 开始创建dom时先判断一下 搜索区域是否显示
    if (this.screenWidth <= 1200) {
      this.searchVisible = false;
    }
    if (this.$route.path === "/search") {
      this.searchExist = false;
    }
    var user = JSON.parse(sessionStorage.getItem('user'));
    var _this = this;
    if (user) {
      _this.dialogVisible = false;
      _this.userimg = user.userImgsrc;
      _this.userid = user.userId;
      _this.img = true;
      if (_this.img == true) {
        _this.findhistory()
        _this.attentionNum();
        _this.fansNum();
      } else {
        alert("失败")
      }
    }
  },
  mounted() {
    const that = this;
    // 在页面mounted时，挂载window.onresize方法
    // 监听窗口变化
    window.onresize = () => {
      return (() => {
        that.screenWidth = document.body.clientWidth;
      })();
    };
    window.addEventListener('keydown', this.keyDown);
    // 获取数据
    // this.restaurants = this.loadAll();
  },
  watch: {
    screenWidth(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        this.screenWidth = val;
        this.timer = true;
        const that = this;
        setTimeout(function () {
          if (that.screenWidth <= 1200) {
            that.searchVisible = false;
          } else {
            that.searchVisible = true;
          }
          that.timer = false;
        }, 400);
      }
    },
    // 监听热搜的数据 实时更新data里的值
    hotsearch(val) {
      this.hotData = val;
    },
  },
  methods: {
    /**
     * 更多历史
     */
    morehistory() {
      let newUrl = this.$router.resolve({
        path: "/history"
      });
      window.open(newUrl.href, "_blank");
    },
    /**
     * 查看历史观看记录*/
    findhistory() {
      this.$http.post("hemo/system/history/findhistory", {userid: this.userid}).then(result => {
        this.historyList = result.data;
      })
    },
    /**
     * 查询用户关注的人数
     */
    contribute() {
      if (this.img == false) {
        this.$message({
          type: "error",
          message: '您还未登录！'
        })
        this.dialogVisible = true
      } else {
        this.$router.push(`/wr`);
      }
    },
    attentionNum() {
      this.$http.post("user/user/fansByUserId", {userId: this.userid}).then(result => {
        this.attention = result.data;
      })
    },
    fansNum() {
      this.$http.post("user/user/bean", {userId: this.userid}).then(result => {
        this.fans = result.data;
      })
    },
    /**
     * 用户注册按钮点击事件
     */
    submitForm3(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post("user/user/saveUser", {
            userPassword: this.registerForm.password2,
            userTel: this.registerForm.phone
          }).then(result => {
            if (result != 0) {
              //this.dialogVisible = false;
              this.$router.go(0);
            } else {
              this.$message({
                message: '注册失败',
                type: 'warning'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    /**
     * 忘记密码修改密码方法
     */
    amendPswd() {
      this.$http.post("user/user/amendPswd", {
        userTel: this.editfrom.phone,
        userPassword: this.editfrom.password2
      }).then(result => {
        if (result.data > 0) {
          this.dialogVisible = false;
          this.$router.go(0);
        } else {
          this.$message({
            message: '修改失败',
            type: 'warning'
          });
        }
      })
    },
    /**
     * 忘记密码修改事件
     */
    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.amendPswd();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //验证码登陆模式
    query() {
      this.$http.post("user/user/userPhone", {userTel: this.loginForm.phone}).then(result => {
        if (this.loginForm.phone != result.data.userTel) {
          this.$message.error("该手机号不存在！请先注册")
        } else {
          this.ruleForm.password = result.data.userPassword;
          this.ruleForm.username = result.data.userTel;
          this.login();
        }
      })
    },
    /**
     * 密码登陆牧师
     * @param formName
     */
    submitForm1(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.query();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    login() {
      var _this = this
      var grant_type = "password";
      this.$http.post("oauth/oauth/token", {
        username: this.ruleForm.username,
        password: this.ruleForm.password,
        grant_type: grant_type
      }, {
        headers: {"Authorization": "Basic dXNlci1jbGllbnQ6dXNlci1zZWNyZXQtODg4OA=="},
      }).then(function (res) {
        if (res.request.status == 200) {
          let accessToken = res.data.access_token;
          let user = res.data.user;
          sessionStorage.setItem("token", "bearer " + accessToken)
          sessionStorage.setItem("user", JSON.stringify(user))
          sessionStorage.setItem("refreshToken", res.data.refresh_token)
          _this.dialogVisible = false;
          _this.userimg = res.data.user.userImgsrc;
          _this.userid = res.data.user.userId;
          _this.img = true;
          _this.$message.success("登陆成功")
          if (_this.img == true) {
            _this.findhistory()
            _this.attentionNum();
            _this.fansNum();
          } else {
            alert("失败")
          }
        }else{
          _this.$message.error("手机号或密码错误")
        }
      }).catch(error=>{
        _this.$message.error({
          message: '手机号或密码错误',
          center: true,
          duration:3000,
          showClose:true,
          type:error,
        });
      });
    },
    /**
     * 密码登录
     * @param formName
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //短信登陆
    getVerifyCode() {
      var vm = this;
      if (this.count = 60) {
        this.$http.post("user/send", {phone: vm.loginForm.phone}).then(result => {
          vm.param = result.data.code.toString();
        })
      }

      var countDown = setInterval(() => {
        if (this.count < 1) {
          this.isGeting = false
          this.disable = false
          this.getCode = '获取验证码'
          this.count = 60
          this.param = ''
          clearInterval(countDown);
        } else {
          this.isGeting = true
          this.disable = true
          this.getCode = this.count-- + 's后重发'
        }
      }, 1000)
    },
    //调用阿里云短信接口向
    getVerifyCode1() {
      var vm = this;
      if (this.count1 = 60) {
        this.$http.post("user/send", {phone: vm.editfrom.phone}).then(result => {
          vm.param1 = result.data.code.toString();
        })
      }

      var countDown = setInterval(() => {
        if (this.count1 < 1) {
          this.isGeting1 = false
          this.disable1 = false
          this.getCode1 = '获取验证码'
          this.count1 = 60
          this.param1 = ''
          this.$message.error("验证码已过期")
          clearInterval(countDown);
        } else {
          this.isGeting1 = true
          this.disable1 = true
          this.getCode1 = this.count1-- + 's后重发'
        }
      }, 1000)
    },
    //调用阿里云短信接口向用户发送验证码来判断是否可以修改
    getVerifyCode2() {
      var vm = this;
      if (this.count2 = 60) {
        this.$http.post("user/send", {phone: vm.registerForm.phone}).then(result => {
          vm.param2 = result.data.code.toString();
        })
      }

      var countDown = setInterval(() => {
        if (this.count2 < 1) {
          this.isGeting2 = false
          this.disable2 = false
          this.getCode2 = '获取验证码'
          this.count2 = 60
          this.param2 = ''
          this.$message.error("验证码已过期")
          clearInterval(countDown);
        } else {
          this.isGeting2 = true
          this.disable2 = true
          this.getCode2 = this.count2-- + 's后重发'
        }
      }, 1000)
    },
    // 返回首页
    returnHome() {
      if (this.$route.path === "/home") {
        return;
      }
      this.$router.push("/home");
    },
    // 输入框获取焦点时调用的方法
    querySearch(queryString, cb) {
      let results = this.hotData;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    // 判断选中了哪个热搜
    handleSelect(item) {
      this.searchData = item.keyword;
      this.routerJump();
    },
    // 判断热搜图片
    hotIconImg(item) {
      if (item.icon === "") {
        return false;
      }
      return item.icon;
    },

    // 确认搜索
    searchConfirm() {
      if (this.searchData === "") {
        this.searchData = this.searchDefaults;
      }
      this.routerJump();
      /* this.$message({
            // 可关闭
            showClose: true,
            message: "搜索内容为空，无法搜索!",
            type: "warning",
            // 持续时间
            duration: "500",
          }); */
    },

    // 路由跳转
    routerJump() {
      // 跳转到搜索页面
      this.$router.push(`/search?keyword=${this.searchData}`);
    },

    // 请求默认关键词
    async getDefaultWords() {
      try {
        const {data: res} = await this.$axiosbili({
          url: "/defaultsearch/x/web-interface/search/default",
          method: "get",
        });
        if (res.data.show_name === undefined) {
          return;
        }
        this.searchDefaults = res.data.show_name;
      } catch (err) {
        this.searchDefaults = "请输入内容";
      }
    },

    // 请求搜索建议
    async getSuggest() {
      const {data: res} = await this.$axiosbili.get("/defaultsearch/suggest");
    },
    pswd() {
      document.getElementById("pswd").style.color = "deepskyblue";
      document.getElementById("note").style.color = "black";
      document.getElementById("pswdLogin").hidden = "";
      document.getElementById("nodeLogin").hidden = "hidden";
      document.getElementById("forgetLogin").hidden = "hidden";
      document.getElementById("register").hidden = "hidden";
      document.getElementById("register1").hidden = "hidden";
      document.getElementById("login").hidden = "";
      document.getElementById("forget").hidden = "hidden";
      this.registerForm = {};
      this.loginForm = {};
      this.editfrom = {};
      this.ruleForm = {};
    },
    note() {
      document.getElementById("note").style.color = "deepskyblue";
      document.getElementById("pswd").style.color = "black";
      document.getElementById("pswdLogin").hidden = "hidden";
      document.getElementById("register").hidden = "hidden";
      document.getElementById("register1").hidden = "hidden";
      document.getElementById("nodeLogin").hidden = "";
      document.getElementById("forgetLogin").hidden = "hidden";
      this.registerForm = {};
      this.loginForm = {};
      this.editfrom = {};
      this.ruleForm = {};
      this.$refs.ruleForm.clearValidate();
      this.$refs.editfrom.clearValidate();
      this.$refs.loginForm.clearValidate();
      this.$refs.registerForm.clearValidate();
    },
    register() {
      document.getElementById("note").style.color = "deepskyblue";
      document.getElementById("pswd").style.color = "black";
      document.getElementById("pswdLogin").hidden = "hidden";
      document.getElementById("login").hidden = "hidden";
      document.getElementById("register").hidden = "";
      document.getElementById("register1").hidden = "";
      document.getElementById("nodeLogin").hidden = "hidden";
      document.getElementById("forgetLogin").hidden = "hidden";
      this.registerForm = {};
      this.loginForm = {};
      this.editfrom = {};
      this.ruleForm = {};
      this.$refs.ruleForm.clearValidate();
      this.$refs.editfrom.clearValidate();
      this.$refs.loginForm.clearValidate();
      this.$refs.registerForm.clearValidate();
    },
    forget() {
      document.getElementById("pswd").style.color = "black";
      document.getElementById("note").style.color = "black";
      document.getElementById("pswdLogin").hidden = "hidden";
      document.getElementById("nodeLogin").hidden = "hidden";
      document.getElementById("register").hidden = "hidden";
      document.getElementById("register1").hidden = "hidden";
      document.getElementById("forgetLogin").hidden = "";
      document.getElementById("login").hidden = "hidden";
      document.getElementById("forget").hidden = "";
      this.registerForm = {};
      this.loginForm = {};
      this.editfrom = {};
      this.ruleForm = {};
      this.$refs.ruleForm.clearValidate();
      this.$refs.editfrom.clearValidate();
      this.$refs.loginForm.clearValidate();
      this.$refs.registerForm.clearValidate();
    },
    /*登陆未登录操作时间*/
    ap1() {
      if (this.img == true) {
        this.dialogVisible = false;
      } else {
        this.dialogVisible = true;
      }
    },
    //跳转个人中心
    rou() {
      let newUrl = this.$router.resolve({
        path: "/per"
      });
      window.open(newUrl.href, "_blank");
    },
    //注销销毁session
    clear() {
      sessionStorage.clear();
      this.$router.go(0);

    },
    // 点击跳转路径
    jumpPath(keyword) {
      let newUrl = this.$router.resolve({
        path: `/Vedios?id=${keyword}`
      });
      window.open(newUrl.href, "_blank");
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.login();
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success('Success!');
          this.login();

        } else {
          this.$Message.error('Fail!');
        }
      })
    },
  },
  destroyed() {
    window.removeEventListener('keydown', this.keyDown, false);
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }
  }
};

</script>

<style scoped>
.history:hover {
  cursor: pointer;
  background-color: #cccccc;
}

.history {
  padding: 10px 0px;
}

* {
  color: #fff;
}

.navbar_main {
  display: flex;
  height: 56px;
  /* justify-content: space-between; */
  align-items: center;
}

/* nav左边部分 */
.nav_left {
  width: 434px;
  height: 100%;
}

.nav_left ul {
  display: flex;
  padding: 0;
  margin-top: 16px;
  justify-content: space-around;
}

.nav_left_item {
  cursor: pointer;
  font-size: 14px;
  color: #fff;
}

.home_logo {
  color: #fff;
}

.app_logo {
  font-size: 16px;
}

/* nav 游戏 */
.nav-game {
  display: flex;
  justify-content: space-between;
  width: 350px;
}

.n-g-left {
  width: 60%;
}

.n-g-img {
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: pink;
  padding: 0;
}

.n-g-img img {
  /* 块级元素内部默认有行框，行框撑高了块级元素。
      img和其他块级元素并列的时候，由于img默认是display:inline-block，
      产生匿名块框包裹img，匿名块框内部生成了行框，多余了几个像素 */
  display: block;
  width: 100%;
}

.n-g-recommend {
  width: 100%;
  display: flex;
}

.recommend-item {
  flex: 1;
  margin-top: 10px;
  border-radius: 15px;
  overflow: hidden;
}

.recommend-item:nth-child(2) {
  margin: 10px 15px 0;
}

.recommend-item img {
  display: block;
  width: 100%;
}

/* 下划线 */
.el-divider {
  height: 180px;
}

.n-g-right {
  width: 30%;
}

.n-g-title {
  display: block;
  color: #555;
  font-size: 12px;
  line-height: 30px;
}

/* nav 直播 */
.nav-zhibo {
  width: 400px;
  display: flex;
  justify-content: space-between;
}

.n-z-left {
  width: 55%;
}

.n-z-l-title {
  font-size: 16px;
  color: #ec81a7;
}

.n-z-l-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.n-z-l-item {
  display: inline-block;
  width: 28%;
  margin-top: 10px;
}

.n-z-l-item img {
  width: 100%;
  border-radius: 50%;
}

.n-z-l-item p {
  color: #555;
  font-size: 12px;
  /* 一行显示 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

/* 下划线 */
.hot-divider {
  height: 208px;
}

.n-z-right {
  width: 40%;
}

.n-z-right img {
  width: 100%;
  margin-top: 20px;
}

/* nav 扫码 */
.nav-app {
  width: 200px;
}

.nav-app img {
  width: 100%;
}

/* nav中间部分 */
.nav_center {
  flex: 1;
  margin: 0 30px;
}

.nav_center_search {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 2vw;
}

.search_inp {
  flex: 1;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.hot_pos {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 12px;
  color: #555;
}

.hot_keyword {
  display: inline-block;
  font-size: 12px;
  color: #555;
  margin: 0 8px;
}

.hot_icon {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.hot_icon img {
  width: 100%;
  height: 100%;
}

.search_btn {
  width: 48px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.search_logo {
  font-size: 24px;
  font-weight: 600;
  color: #2999d9;
}

/* nav右边部分 */
.nav_right {
  height: 100%;
  width: 454px;
}

.nav_right ul {
  display: flex;
  margin: 0;
  margin-top: 8px;
  padding: 0;
  justify-content: space-around;
  align-items: center;
}

.nav_right_item {
  cursor: pointer;
  font-size: 14px;
  color: #fff;
}

/* 大会员 */
.bigmember {
  width: 200px;
  font-size: 12px;
}

.bigmember-title {
  color: #555;
  font-weight: 600;
}

.bigmember-img {
  margin-top: 10px;
}

.bigmember-img img {
  width: 100%;
}

.bigmember p {
  color: #555;
  margin: 10px 0;
}

.bigmember-btn {
  text-align: center;
}

/* 消息 */
.message {
  width: 100px;
}

.message-item {
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
  padding-left: 8px;
}

.message-item span {
  color: #555;
  font-size: 13px;
}

.message-item-spot {
  float: right;
}

#ziv1 {
  /*width: 100%;*/
  /*height: 600px;*/
  /*background-color: ;*/
  /*position: absolute;*/
  /*top: 0px;*/
  /*left: 0px;*/
  /*opacity: 0.5;*/
  /*z-index: 1;*/
  /*display: none;*/
}

/*登录div*/
/*#dv1{*/
/*  position: absolute;*/
/*  top: 30px;*/
/*  left: 100px;*/
/*  display: none;*/
/*  z-index: 2;*/
/*}*/
#pswd {
  font-size: 20px;
  text-decoration: none;
}

#b1 {
  position: absolute;
  right: 8%;
  top: 18%;
}

#note {
  font-size: 20px;
  text-decoration: none;
}

.f1 {
}

.el-form-item__error {
  width: 120px;
}
</style>
